<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频进度条</title>
    <style>
        body,p{
            margin: 0;
            padding: 0;
        }
        main{
            position: relative;
        }
        video{
            width: 100%;
            border: 0;
            vertical-align: bottom;
        }
        .prograss-bar{
            width: 100%;
            height: 5px;
            background-color: rgba(100, 100, 100, 0.5);
            position: absolute;
            bottom: 0px;
            left: 0;
        }
        .prograss-bar .prograss{
            height: 5px;
            width: 0%;
            background-color: rgba(220, 220, 220, 0.9);
        }
        img{
            position: absolute;
            bottom: 10px;
            left: 10px;
        }
        p{
            position: absolute;
            bottom: 10px;
            left: 30px;
            font-size: 12px;
            color: #eee;
            display: none;
        }
        p span{
            padding: 0 3px;
        }
        p .current::after{
            content: "";
            display: inline-block;
            height: 9px;
            width: 1px;
            background-color: #ddd;
            margin-left: 5px;
        }
    </style>
</head>
<body>
    <main>
        <video src="./imgs/1.mp4"></video>
        <div class="prograss-bar">
            <div class="prograss"></div>
        </div>
        <img src="./imgs/playCircle.png" alt="">
        <p><span class="current"></span><span class="total"></span></p>
    </main>

    <script>
        // 第一步：给按钮添加点击事件，播放视频，并且更换图片，同时进度条变长
        let img = document.querySelector('img');
        let flag = false;   // 表示视频没有播放，用标记思想记录视频是否处于播放状态，因为是否是否播放，无法直接判断
        img.addEventListener('click',function(){
            let video = document.querySelector('video');
            // 1.1将显示事件的空间显示出来
            document.querySelector('p').style.display = 'block';
            // 1.2总时长显示计算
            let mTotal = Math.floor(video.duration / 60);
            let sTotal = (video.duration % 60).toFixed(0);
            // 1.3将换算好的总时长，放进对应的额标签中，这里需要进行一个补0判断
            document.querySelector('.total').textContent = `${mTotal < 10?0:''}${mTotal}:${sTotal < 10?0:''}${sTotal}`
            // 1.4将进度条对应的时间的初始值，设置为00：00；
            document.querySelector('.current').textContent = `00:00`
            // 1.5定义一个变量用来接收定时器
            let timer = null;
            // 1.6判断点击时视频播放的状态，对应的切换按钮和视频的状态
            if (!flag) {       // flag = false表示视频没有播放   !flag成立，表示表示视频没有播放,需要播放
                // 1.6.1播放视频
                video.play();
                // 1.6.2更换按钮图片
                img.src = './imgs/pauseCircle.png';
                // 1.6.3改变flag值，相当于标记视频的状态
                flag = !flag;   // 改变视频播放的状态

                // 1.6.4进度条的宽度,需要持续动态获取，用到定时器
                timer = setInterval(function(){
                    // 获取当前时间占总时长的比例，对应着当前进度条和总进度条的比例
                    let prograssWidth = video.currentTime / video.duration;
                    document.querySelector('.prograss').style.width = prograssWidth*100 + '%';

                    // 进度时长显示计算
                    let mCurrent = Math.floor(video.currentTime / 60);
                    let sCurrent = (video.currentTime % 60).toFixed(0);
                    // 将换算好的进度时长，放进对应的标签中
                    document.querySelector('.current').textContent = `${mCurrent < 10?0:''}${mCurrent}:${sCurrent < 10?0:''}${sCurrent}`
                },50);
            }else{       // 表示视频正在播放，点击后需要停止播放
                // 暂停视频
                video.pause();
                // 更换图片
                img.src = './imgs/playCircle.png';
                // 改变视频状态的标记
                flag = !flag;
                // 停止获取进度条的宽度
                clearInterval(timer);
                timer = null;
            } 
        });

        // 给总的进度条大框添加点击事件
        document.querySelector('.prograss-bar').addEventListener('click',function(e){
            // console.log(e.x);
            let prograss = document.querySelector('.prograss');
            let video = document.querySelector('video');
            prograss.style.width = e.x+'px';
            video.currentTime = e.x / 375 * video.duration;
        })
    </script>
</body>
</html>